<template>
	<div class="page">
		<div class="wos-menu wos-hand" >
			<div :class="menu === '普通' ? 'active' : '' " @click="menu = '普通'">普通</div>
			<div :class="menu === '高级' ? 'active' : '' " @click="menu = '高级'">高级</div>
		</div>

		<div style="padding:40px;min-height: 700px">
			<div class="wos-tab" v-show="menu === '普通'" >
				<div class="wos-tab-title wos-flex-between wos-flex" @click="aa = !aa" style="margin-bottom: 10px">
					<div>
						端口
					</div>
					<div>
						<i class="iconfont icon-down" v-if="aa === false"></i>
						<i class="iconfont icon-up" v-else></i>
					</div>
				</div>
				<div v-show="aa === true">
					<img src="../../assets/images/temp-aa.png" alt="" >
				</div>
				<div class="wos-tab-title wos-flex-between wos-flex" @click="bb = !bb" style="margin-bottom: 10px">
					<div>
						路由
					</div>
					<div>
						<i class="iconfont icon-down" v-if="bb === false"></i>
						<i class="iconfont icon-up" v-else></i>
					</div>
				</div>
				<div v-show=" bb === true">
					<img src="../../assets/images/temp-bb.png" alt="">
				</div>
				<div class="wos-tab-title wos-flex-between wos-flex" @click="cc = !cc" style="margin-bottom: 10px">
					<div>
						平台服务器
					</div>
					<div>
						<i class="iconfont icon-down" v-if="cc === false"></i>
						<i class="iconfont icon-up" v-else></i>
					</div>
				</div>
				<div v-show=" cc === true">
					<img src="../../assets/images/temp-cc.png" alt="">
				</div>
			</div>


			<div class="wos-tab" v-show="menu === '高级'" >
<!--b1-->
				<div class="wos-tab-title wos-flex-between wos-flex" @click="b1 = !b1" style="margin-bottom: 10px">
					<div>
						DDNS
					</div>
					<div>
						<i class="iconfont icon-down" v-if="b1 === false"></i>
						<i class="iconfont icon-up" v-else></i>
					</div>
				</div>
				<div v-show="b1 === true">
					<img src="../../assets/images/temp-aa.png" alt="" >
				</div>

<!--b2-->
				<div class="wos-tab-title wos-flex-between wos-flex" @click="b2 = !b2" style="margin-bottom: 10px">
					<div>
						Email 设置
					</div>
					<div>
						<i class="iconfont icon-down" v-if="b2 === false"></i>
						<i class="iconfont icon-up" v-else></i>
					</div>
				</div>
				<div v-show="b2 === true">
					<img src="../../assets/images/temp-aa.png" alt="" >
				</div>
<!--b3-->
				<div class="wos-tab-title wos-flex-between wos-flex" @click="b3 = !b3" style="margin-bottom: 10px">
					<div>
						FTP
					</div>
					<div>
						<i class="iconfont icon-down" v-if="b3 === false"></i>
						<i class="iconfont icon-up" v-else></i>
					</div>
				</div>
				<div v-show="b3 === true">
					<img src="../../assets/images/temp-aa.png" alt="" >
				</div>

<!--b4-->
				<div class="wos-tab-title wos-flex-between wos-flex" @click="b4 = !b4" style="margin-bottom: 10px">
					<div>
						UPnP
					</div>
					<div>
						<i class="iconfont icon-down" v-if="b4 === false"></i>
						<i class="iconfont icon-up" v-else></i>
					</div>
				</div>
				<div v-show="b4 === true">
					<img src="../../assets/images/temp-aa.png" alt="" >
				</div>
<!--b5-->
				<div class="wos-tab-title wos-flex-between wos-flex" @click="b5 = !b5" style="margin-bottom: 10px">
					<div>
						SNMP
					</div>
					<div>
						<i class="iconfont icon-down" v-if="b5 === false"></i>
						<i class="iconfont icon-up" v-else></i>
					</div>
				</div>
				<div v-show="b5 === true">
					<img src="../../assets/images/temp-bb.png" alt="" >
				</div>
<!--b6-->
				<div class="wos-tab-title wos-flex-between wos-flex" @click="b6 = !b6" style="margin-bottom: 10px">
					<div>
						组播设置
					</div>
					<div>
						<i class="iconfont icon-down" v-if="b6 === false"></i>
						<i class="iconfont icon-up" v-else></i>
					</div>
				</div>
				<div v-show="b6 === true">
					<img src="../../assets/images/temp-cc.png" alt="" >
				</div>
<!--b7-->
				<div class="wos-tab-title wos-flex-between wos-flex" @click="b7 = !b7" style="margin-bottom: 10px">
					<div>
						主动注册（客户端）
					</div>
					<div>
						<i class="iconfont icon-down" v-if="b7 === false"></i>
						<i class="iconfont icon-up" v-else></i>
					</div>
				</div>
				<div v-show="b7 === true">
					<img src="../../assets/images/temp-cc.png" alt="" >
				</div>

				<div class="wos-tab-title wos-flex-between wos-flex" @click="b8 = !b8" style="margin-bottom: 10px">
					<div>
						主动注册（服务端）
					</div>
					<div>
						<i class="iconfont icon-down" v-if="b8 === false"></i>
						<i class="iconfont icon-up" v-else></i>
					</div>
				</div>
				<div v-show="b8 === true">
					<img src="../../assets/images/temp-aa.png" alt="" >
				</div>
<!--b9-->
				<div class="wos-tab-title wos-flex-between wos-flex" @click="b9 = !b9" style="margin-bottom: 10px">
					<div>
						图标28181
					</div>
					<div>
						<i class="iconfont icon-down" v-if="b9 === false"></i>
						<i class="iconfont icon-up" v-else></i>
					</div>
				</div>
				<div v-show="b9 === true">
					<img src="../../assets/images/temp-bb.png" alt="" >
				</div>
<!--b10-->
				<div class="wos-tab-title wos-flex-between wos-flex" @click="b10 = !b10" style="margin-bottom: 10px">
					<div>
						带宽管理
					</div>
					<div>
						<i class="iconfont icon-down" v-if="b10 === false"></i>
						<i class="iconfont icon-up" v-else></i>
					</div>
				</div>
				<div v-show="b10 === true">
					<img src="../../assets/images/temp-cc.png" alt="" >
				</div>
			</div>
		</div>
		<div class="console">
			<button>默认</button>
			<button class="active">确定</button>
			<button>刷新</button>
		</div>
	</div>
</template>

<script>
    export default {
        name: "net",
	    data:function(){
            return {
                menu:"普通",
                aa:true,
	            bb:false,
	            cc:false,
	            b1:false,
                b2:false,
                b3:false,
                b4:false,
                b5:false,
                b6:false,
                b7:false,
                b8:false,
                b9:false,
                b10:false,

            }
	    }
    }
</script>

<style scoped>

</style>
